<!--
 * @Author: zxc
 * @Date: 2020-11-24 12:58:22
 * @LastEditTime: 2020-11-24 12:58:55
 * @LastEditors: zxc
 * @Description: 
-->
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <div>
      <input v-model="username" />
      <input v-model="password" />
    </div>
    <div>
      <button v-on:click="login">Login</button>
      <button v-on:click="logout">Logout</button>
      <button v-on:click="getUser">GetUser</button>
    </div>
    <div>
      <button @click="logs=[]">Clear Log</button>
    </div>
    <!-- 日志 -->
    <ul>
      <li v-for="(log,idx) in logs" :key="idx">
        {{ log }}
      </li>
    </ul>
  </div>
  <script>
    axios.interceptors.request.use(
      config => {
        const token = window.localStorage.getItem("token");
        if (token) {
          // 判断是否存在token，如果存在的话，则每个http header都加上token
          // Bearer是JWT的认证头部信息
          config.headers.common["Authorization"] = "Bearer " + token;
        }
        return config;
      },
      err => {
        return Promise.reject(err);
      }
    );

    axios.interceptors.response.use(
      response => {
        app.logs.push(JSON.stringify(response.data));
        return response;
      },
      err => {
        app.logs.push(JSON.stringify(response.data));
        return Promise.reject(err);
      }
    );
    var app = new Vue({
      el: "#app",
      data: {
        username: "test",
        password: "test",
        logs: []
      },
      methods: {
        async login() {
          const res = await axios.post("/login-token", {
            username: this.username,
            password: this.password
          });
          localStorage.setItem("token", res.data.token);
        },
        async logout() {
          localStorage.removeItem("token");
        },
        async getUser() {
          await axios.get("/getUser-token");
        }
      }
    });
  </script>
</body>

</html>